<template>
  <el-dialog
    append-to-body
    :close-on-click-modal="false"
    :visible.sync="dialogFormVisible"
    :before-close="close"
    :title="title"
    width="100%"
    :fullscreen="true"
  >
    <div class="custom-body">
      <div class="custom-iphone" :style="background">
        <div class="iphone-body">
          <div class="iphone-article">
            <mobile-index ref="mobile" />
          </div>
          <div class="iphone-button">
            <div class="iphone-content">
              <div
                v-for="(item,index ) in footList"
                :key="'foot-'+index"
                :class="index === active ? 'active': ''"
                class="button-li"
                :style="{width: getLabelWidth}"
                @click="classActive(index,item)"
              >
                <div class="footer-image">
                  <el-image :src="footer" />
                </div>
                <div class="li-icon" :class="item.tb" />
                <div class="li-title">{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="custom-set-body">
        <div class="setting-body">
          <div class="setting-header">系统设置</div>
          <div class="setting-article">
            <el-row :gutter="20">
              <el-col :span="4">
                <div class="setting-body body-shadow">
                  <div class="setting-body-header"><i class="el-icon-guide" />&nbsp;&nbsp;&nbsp;&nbsp;菜单设置</div>
                  <draggable v-model="footList" animation="300" @end="clone">
                    <div
                      v-for="(item,index) in footList"
                      :key="item.id"
                      :class="index === active ? 'active': ''"
                      class="footer-menu"
                      @click="classActive(index,item)"
                    >
                      <i class="custom-icon" :class="item.tb" />
                      {{ item.name }}
                      <div class="custom-delete" @click="deleteFooter(item)"><i class="el-icon-delete-solid" /></div>
                    </div>
                  </draggable>
                  <div class="footer-menu" @click="addNew">
                    <i class="custom-icon  el-icon-plus" />
                    添加
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="setting-body body-shadow">
                  <div class="setting-body-header"><i class="el-icon-wallet" />&nbsp;&nbsp;&nbsp;&nbsp;栏目设置</div>
                  <draggable v-model="columnList" animation="300" @end="cloneColumn">
                    <div
                      v-for="(item,index) in columnList"
                      :key="item.id"
                      :class="index === columnActive ? 'active': ''"
                      class="footer-menu"
                      @click="columnClassActive(index,item)"
                    >
                      <i class="custom-icon" :class="item.tb" />
                      {{ item.name }}
                      <div class="custom-delete" @click="deleteColumnFooter(item)"><i class="el-icon-delete-solid" /></div>
                    </div>
                  </draggable>
                  <div class="footer-menu" @click="addColumns">
                    <i class="custom-icon  el-icon-plus" />
                    添加
                  </div>
                </div>
              </el-col>
              <el-col :span="14">
                <div class="setting-body body-shadow">
                  <div class="setting-body-header"><i class="el-icon-set-up" />&nbsp;&nbsp;&nbsp;&nbsp;属性设置</div>
                  <column-edit ref="columnEdit" @fetch-data="editColumn" />
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
    <foot-menu-set ref="footMenu" @fetch-data="addNewFootMenu" />
    <column-add ref="columnAdd" @fetch-data="callBackAddColumn" />
    <foot-menu-edit ref="footerEdit" />
  </el-dialog>
</template>

<script>
import draggable from 'vuedraggable'
import FootMenuSet from './footMenuSet'
import ColumnAdd from './columnAdd'
import ColumnEdit from './columnEdit'
import FootMenuEdit from '@/views/portal4.0/mobile/component/footMenuEdit.vue'
import MobileIndex from '@/portal4.1/mobile/components/content'
import { queryAllMenuByLayOutId, saveAllLayoutMenu, deleteLayoutByIds } from '@/api/mobile/menu/index'
import { queryALlColumnByMenuId, saveAllColumns, deleteAllColumns } from '@/api/tp/column/index'
export default {
  name: 'MobileManagerSet',
  components: { draggable, FootMenuSet, ColumnAdd, ColumnEdit, MobileIndex, FootMenuEdit },
  data() {
    return {
      title: '移动门户设置',
      dialogFormVisible: false,
      background: {
        backgroundImage: 'url(' + require('@/assets/mobile/iphone.jpg') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '640px',
        backgroundPosition: 'center center'
      },
      footer: require('@/assets/mobile/button_01.png'),
      footList: [],
      columnList: [],
      active: 0,
      columnActive: 0,
      layout: {},
      form: {},
      menu: {},
      queryColumn: {
        mid: null
      }
    }
  },
  computed: {
    getLabelWidth: function() {
      if (this.footList !== null && this.footList.length > 0) {
        return (Math.floor(100) / (this.footList.length)) + '%'
      }
      return '100%'
    }
  },
  created() {
    // 解决火狐拖拽搜索的问题
    document.body.ondrop = function(event) {
      event.preventDefault()
      event.stopPropagation()
    }
  },
  methods: {
    openEntity(data) {
      this.dialogFormVisible = true
      this.layout = data
      this.initLayout()
    },
    addNew() {
      this.$refs.footMenu.openEntity()
    },
    addColumns() {
      this.$refs.columnAdd.openEntity()
    },
    close() {
      this.loading = false
      this.dialogFormVisible = false
      this.$emit('fetch-data')
    },
    clone() {
      // 重新设置列表排序
      this.footList = this.footList.map((item, index) => {
        item.px = index + 1
        return item
      })
      this.saveLayout()
    },
    cloneColumn() {
      // 重新设置列表排序
      this.columnList = this.columnList.map((item, index) => {
        item.px = index + 1
        return item
      })
      this.saveColumn()
    },
    addNewFootMenu(data) {
      const newData = { name: data.name, tb: data.tb, sfsc: false }
      this.footList.push(newData)
      this.saveLayout()
    },
    callBackAddColumn(data) {
      const newData = {
        id: data.id,
        name: data.name,
        tb: data.tb,
        sfqy: data.sfqy,
        sfzdy: data.sfzdy,
        sfdzqp: data.sfdzqp,
        sfsxtb: data.sfsxtb,
        backgroundColor: data.backgroundColor,
        fontColor: data.fontColor,
        isMore: data.isMore,
        sfsc: false,
        dkfs: data.dkfs,
        sfxsbk: data.sfxsbk, // 是否显示边框
        yjdx: data.yjdx, // 边框圆角大小
        topLeft: data.topLeft, // 左上角
        topRight: data.topRight, // 右上角
        bottomLeft: data.bottomLeft, // 左下角
        bottomRight: data.bottomRight, // 右下角
        sfxsbt: data.sfxsbt === undefined ? true : data.sfxsbt, // 是否显示标题
        sfxsbjs: data.sfxsbjs, // 是否显示背景色
        mtop: data.mtop, // 上边距
        mbotton: data.mbotton, // 下边距
        mleft: data.mleft, // 左边距
        mright: data.mright, // 右边距
        data: {
          id: data.data.id
        },
        defaultHeight: data.defaultHeight
      }
      this.columnList.push(newData)
      this.saveColumn()
    },
    classActive(val, entity) {
      this.active = val
      this.menu = entity
      this.queryColumn.mid = entity.id
      this.$refs.footerEdit.openDialog(entity)
      this.initColumn()
    },
    columnClassActive(val, entity) {
      this.columnActive = val
      this.$refs.columnEdit.openEntity(entity)
    },
    deleteColumnFooter(data) {
      this.$confirm('此操作将永久删除栏目-' + data.name + ', 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (undefined === data.id || data.id === null) {
          const index = this.columnList.indexOf(data)
          if (index !== -1) {
            this.columnList.splice(index, 1)
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } else {
          const id = [data.id]
          deleteAllColumns(id).then(res => {
            this.initColumn()
            this.$message.success('删除成功')
          }).catch(() => {
            this.$message.error('删除成功')
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    deleteFooter(data) {
      this.$confirm('此操作将永久删除' + data.name + '菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (undefined === data.id || data.id === null) {
          const index = this.footList.indexOf(data)
          if (index !== -1) {
            this.footList.splice(index, 1)
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } else {
          const id = [data.id]
          deleteLayoutByIds(id).then(res => {
            this.initLayout()
            this.$message.success('删除成功')
          }).catch(() => {
            this.$message.error('删除成功')
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    initLayout() {
      queryAllMenuByLayOutId({ lid: this.layout.id }).then(res => {
        const { data } = res
        if (data !== null && data.length > 0) {
          this.footList = data
          this.menu = data[0]
          this.queryColumn.mid = data[0].id
          this.initColumn()
        } else {
          this.footList = []
        }
      })
    },
    initColumn() {
      if (this.queryColumn.mid !== undefined && this.queryColumn.mid !== null) {
        queryALlColumnByMenuId(this.queryColumn).then(res => {
          const { data } = res
          if (data !== null) {
            this.columnList = data.data
            this.openMobile()
          }
        }).catch(() => {
          this.columnList = []
        })
      }
    },
    saveLayout() {
      if (undefined === this.layout || this.layout === null || this.layout.id === undefined || this.layout.id === null) {
        this.$message.error('保存菜单信息失败！')
      } else {
        this.form.layoutId = this.layout.id
        this.form.list = this.footList
        saveAllLayoutMenu(this.form).then(res => {
          this.$message.success('保存成功！')
          this.initLayout()
        }).catch(() => {
          this.$message.error('保存失败！')
        })
      }
    },
    saveColumn() {
      if (undefined === this.queryColumn.mid || this.queryColumn.mid == null) {
        this.$message.error('未关联菜单信息')
      } else {
        const data = { menuId: this.queryColumn.mid, columns: this.columnList }
        saveAllColumns(data).then(res => {
          this.$message.success('保存成功！')
          this.initColumn()
          this.openMobile()
        }).catch(() => {
          this.$message.error('保存失败！')
        })
      }
    },
    editColumn() {
      this.initColumn()
    },
    openMobile() {
      this.$refs.mobile.openMenu(this.queryColumn.mid)
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-body {
  width: 100%;
  height: 730px;
  position: relative;
}

.custom-iphone {
  width: 500px;
  height: 730px;
  position: relative;
  padding: 65px 98px;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.iphone-body {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  background-color: #eeeeee;
}

.custom-set-body {
  position: absolute;
  left: 520px;
  top: 0;
  right: 20px;
  bottom: 0;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.setting-body {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

.setting-header {
  height: 40px;
  line-height: 40px;
  text-align: left;
  border-bottom: 1px solid #999999;
}

.setting-article {
  height: 635px;
  width: 100%;
  padding: 10px 0;
  box-sizing: border-box;
}

.iphone-article {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 60px;
  z-index: 10;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}

.setting-body-header {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #999999;
  font-size: 12px;
}
.iphone-button {
  height: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  padding: 0 10px;
  box-sizing: border-box;
  background-color: #ffffff;
  color: #606266;
  position: absolute;
  z-index: 100;
}
.iphone-content {
  width: 100%;
  height: 100%;
  display: flex;
}
.body-shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  height: 640px;
  padding: 10px;
  box-sizing: border-box;
}

.footer-menu {
  width: 100%;
  height: 40px;
  border: 1px solid #8c939d;
  line-height: 40px;
  text-align: center;
  position: relative;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
  font-size: 12px;
}

.footer-menu:hover, .footer-menu:hover > .custom-delete {
  background-color: #e3e3e3;
  display: block;
}

.custom-icon {
  position: absolute;
  width: 20px;
  height: 20px;
  left: 10px;
  top: 10px;
  line-height: 20px;
  z-index: 99;
  font-size: 20px;
}

.custom-delete {
  position: absolute;
  right: 0;
  top: 1px;
  height: 38px;
  width: 38px;
  line-height: 38px;
  text-align: center;
  font-size: 20px;
  color: #3A71A8;
  cursor: pointer;
  display: none;
}

.button-li {
  height: 60px;
  position: relative;
}
.li-icon {
  width: 100%;
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 1.4rem;
}

.li-title {
  width: 100%;
  height: 25px;
  line-height: 15px;
  text-align: center;
  font-size: 0.9rem;
}
.footer-image {
  display: none;
}
.active {
  .footer-image {
    display: block;
    position: absolute;
    text-align: center;
    left: -5px;
    right: -5px;
    height: 20px;
    top: -20px;
    .el-image {
      width: 100%;
      height: 100%;
    }
  }
  .li-icon {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: #0a84ff;
    color: #fff;
    text-align: center;
    line-height: 40px;
    font-size: 1.5rem;
    font-weight: bold;
    top: -12px;
    left: 50%;
    margin-left: -20px;
  }
  .li-title {
    width: 100%;
    height: 60px;
    line-height: 85px;
    color: #0a84ff;
  }
}
</style>
